<template>
  <div class="my-index">
    <swiper :images="images" class="swiper" :auto="false" :auto-time="2000"></swiper>
    <div class="my-index-body-box bg-color-page">
      <div class="my-index-body bg-color-page-white">
        <div class="my-index-body-drawers">
          <index-drawer :title="'热门推荐'">
            <index-hots :data="hots"></index-hots>
          </index-drawer>
          <index-drawer :title="'新歌发布'">
            <index-new-music :data="newMusic"></index-new-music>
          </index-drawer>
          <index-drawer :title="'榜单'">
            333333
          </index-drawer>
        </div>
        <div class="my-index-body-right test-border">

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import swiper from "../components/swiper";
import indexDrawer from "../components/index-drawer"
import indexHots from "../components/index-hots"
import IndexNewMusic from "../components/index-new-music";
import indexData from "../data/index-data"

export default {
  mixins: [indexData],
  components: {
    IndexNewMusic,
    swiper, indexDrawer, indexHots
  },
  data() {
    return {}
  },
  name: "index"
}
</script>

<style scoped>
.my-index {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.swiper {

}

.my-index-body-drawers {
  width: 75%;
}

.my-index-body-right {
  width: 25%;
  height: 75%;
}

.my-index-body-box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.my-index-body {
  height: 100%;
  width: 1026px;
  border: 1px rgb(225, 225, 225) solid;
  display: flex;
  flex-direction: row;
}
</style>